<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .score-case {
        width: 1000px;
        margin: 50px auto;
        display: flex;
      }

      .score-case .table {
        flex: 4;
      }

      .score-case .table table {
        width: 100%;
        border-spacing: 0;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }

      .score-case .table table th {
        background: #f5f5f5;
      }

      .score-case .table table tr:hover td {
        background: #f5f5f5;
      }

      .score-case .table table td,
      .score-case .table table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
      }

      .score-case .table table td.red,
      .score-case .table table th.red {
        color: red;
      }

      .score-case .table .none {
        height: 100px;
        line-height: 100px;
        color: #999;
      }

      .score-case .form {
        flex: 1;
        padding: 20px;
      }

      .score-case .form .form-item {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
      }

      .score-case .form .form-item .label {
        width: 60px;
        text-align: right;
        font-size: 14px;
      }

      .score-case .form .form-item .input {
        flex: 1;
      }

      .score-case .form .form-item input,
      .score-case .form .form-item select {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 200px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;
      }

      .score-case .form .form-item input::placeholder {
        color: #666;
      }

      .score-case .form .form-item .cancel,
      .score-case .form .form-item .submit {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 10px;
        margin-right: 10px;
        font-size: 12px;
        background: #ccc;
      }

      .score-case .form .form-item .submit {
        border-color: #069;
        background: #069;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="score-case">
        <!-- 左边的表格 -->
        <div class="table">
          <table>
            <thead>
              <tr>
                <th><input type="checkbox" v-model="chkAll" /></th>
                <th>编号</th>
                <th>科目</th>
                <th>成绩</th>
                <th>考试时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <!-- <tbody v-if="list.length > 0"> -->

            <!-- 如果数组有数据，那么长度肯定不为0，为1,2,3,4..... -->
            <!-- 这些数字其实都是true，当然数组没有数据，长度为0，这个数字为false -->
            <tbody v-if="list.length">
              <tr v-for="(item, index) in list">
                <td><input type="checkbox" v-model="item.isSelect" /></td>
                <td>{{ index + 1 }}</td>
                <td>{{ item.subject }}</td>
                <td :class="{red: item.score < 60}">{{ item.score }}</td>
                <td>{{ formatDate(item.date) }}</td>
                <td><a @click.prevent="del(item.id)" href="#">删除</a></td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="6">
                  <span class="none">暂无数据</span>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="6">
                  <span>总分：{{ totalScore }}</span>
                  <span style="margin-left:50px">平均分：{{ avgScore }}</span>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
        <!-- 右边的表单-输入内容做添加 -->
        <div class="form">
          <div class="form-item">
            <div class="label">科目：</div>
            <div class="input">
              <input
                v-model.trim="subject"
                type="text"
                placeholder="请输入科目"
              />
            </div>
          </div>
          <div class="form-item">
            <div class="label">分数：</div>
            <div class="input">
              <input
                v-model.trim.number="score"
                type="text"
                placeholder="请输入分数"
              />
            </div>
          </div>
          <div class="form-item">
            <div class="label"></div>
            <div class="input">
              <button @click="add" class="submit">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="./vue.js"></script>
    <script src="./dayjs.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            list: [
              {
                id: 15,
                subject: '语文',
                score: 89,
                date: new Date('2022/06/07 10:00:00'),
                isSelect: true
              },
              {
                id: 27,
                subject: '数学',
                score: 100,
                date: new Date('2022/06/07 15:00:00'),
                isSelect: false
              },
              {
                id: 32,
                subject: '英语',
                score: 56,
                date: new Date('2022/06/08 10:00:00'),
                isSelect: false
              },
              {
                id: 41,
                subject: '物理',
                score: 76,
                date: new Date('2022/06/08 10:00:00'),
                isSelect: false
              }
            ],
            // 学科
            subject: '',
            // 分数
            score: ''
          }
        },
        methods: {
          del (id) {
            // 删除的本质就是过滤出一个新数组，新数组没有要删的这个数据
            // 例如我们要删id为32的元素，其实就是过滤出id不等于32的元素组成新数组
            this.list = this.list.filter(v => {
              // 找id不等于传进来要删除的id，才过滤出来
              if (v.id != id) {
                return true
              }
            })

            // 可以简写1
            // this.list = this.list.filter( v => {
            //     // 找id不等于传进来要删除的id，才过滤出来
            //     return v.id != id
            // })
            // 简写2
            // this.list = this.list.filter(v => v.id != id)
          },
          // 添加的点击事件
          add () {
            // 1. 非空判断
            if (this.subject === '' || this.score === '') {
              return alert('请输入完整内容')
            }
            // 2. 不为空就加到数组里
            this.list.push({
              // 想个办法让id绝对不可能重复，时间戳（从1970年1月1日0点到现在的毫秒数）
              id: Date.now(),
              subject: this.subject,
              score: this.score,
              date: new Date(),
              isSelect: false
            })

            // 3. 清空输入内容
            this.subject = this.score = ''
          },

          // 提供一个转换时间的方法
          formatDate (date) {
            return dayjs(date).format('YYYY-MM-DD')
          }
        },
        computed: {
          // 总分
          totalScore () {
            // // 求累加和，先准备累加和变量
            // let sum = 0
            // // 遍历数组
            // this.list.forEach(v => {
            //   sum += v.score
            // })

            // return sum

            // 用reduce做
            return this.list.reduce((sum, v) => (sum += v.score), 0)
          },

          // 平均分
          avgScore () {
            if (this.list.length == 0) return 0
            // 用总分除以数组长度
            return (this.totalScore / this.list.length).toFixed(2)
          },

          // 全选的
          chkAll: {
            get () {
              // // 表格里的数据有一个是false，整体就要是false，都true才是true
              // return this.list.every(v => {
              //   // 如果是true
              //   if (v.isSelect) {
              //     // 返回true
              //     return true
              //   }else {
              //     return false
              //   }
              // })

              // 优化
              return this.list.every(v => v.isSelect)
            },

            set (val) {
              // 把全选的状态给每一项
              this.list.forEach(v => {
                v.isSelect = val
              })
            }
          }
        }
      })
    </script>
  </body>
</html>
